<template>
    <section class="osinbound-wrapper">
      <el-form :inline="true" :model="param" class="osinbound-wrapper_search">
        <el-form-item label="入库单号">
          <el-input v-model="param.orderId" placeholder="请输入单号"></el-input>
        </el-form-item>
        <el-form-item label="供应商(工厂)">
          <el-select v-model="param.vendorId" placeholder="请选择供应商" clearable>
            <el-option
              v-for="(item, index) in vendorList"
              :key="index"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="param.status" placeholder="请选择状态" clearable>
            <!-- <el-option
              v-for="(item, index) in statusList"
              :key="index"
              :label="item.name"
              :value="item.value">
            </el-option> -->
            <el-option label="待提交" value="1"></el-option>
            <el-option label="待审核" value="2"></el-option>
            <el-option label="已审核" value="3"></el-option>
            <el-option label="已驳回" value="4"></el-option>
            <el-option label="已完成" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="param.startTime"
            style="width: 45%"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
          <el-date-picker
            v-model="param.endTime"
            style="width: 45%"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button class="mtb15" type="primary" @click="exportList">导出</el-button>
     <nb-table
      operatorText
      :tableHeaders="tableHeaders"
      :tableData="tableData"
      :clickData="clickData"
      :clickDataWidth="clickDataWidth"
      :clickLast="clickLast"
      :fixedOne="fixedOne"
      :headerMap="queryMap"
      @clickRight="clickRight"
      operatorFixed="left"
      height="auto">
    </nb-table>
    <!-- 分页 -->
    <el-pagination
      align="right"
      style="padding-top: 20px;margin-bottom:100px;"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageData.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageData.pageSize"
      :total="pageData.total"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
</section>
</template>

<script>
import SeContent from '@/components/se-content.vue'
import SeForm from '@/components/se-form.vue'
import NbTable from '@/components/nb-table.vue'
import Pagination from '@/components/pagination.vue'
import {removeEmptyParams} from '@/common/utils'

const DEFAULT_DATA = {
  orderId: '',
  vendorId: '',
  status: '',
  startTime: '',
  endTime: ''
}

export default {
  components: {
    SeContent,
    SeForm,
    NbTable,
    Pagination
  },
  data () {
    return {
      param: Object.assign({}, DEFAULT_DATA),
      vendorList: [],
      statusList: [],
      pageData: {
        pageSize: 10,
        currentPage: 1,
        total: 100
      },
      tableHeaders: [
        {headerKey: 'orderId', headerName: '入库单号', width: '135'},
        {headerKey: 'receivingWarehouse', headerName: '收货仓库'},
        {headerKey: 'vendorName', headerName: '供应商(工厂)'},
        {headerKey: 'status', headerName: '状态', width: '75'},
        {headerKey: 'createUser', headerName: '创建人'},
        {headerKey: 'createTime', headerName: '创建时间'},
        {headerKey: 'submitTime', headerName: '提交时间'},
        {headerKey: 'approvalName', headerName: '最近审批人'},
        {headerKey: 'processingTime', headerName: '最近审批时间'}
      ],
      tableData: [
        {orderId: '2019020211191', receivingWarehouse: '仓库1', vendorName: 'XXXX有限责任公司', status: '1', createUser: 'XX', createTime: '2019-09-08 22:00', submitTime: '2019-09-08 22:00', approvalName: 'XX', processingTime: '2019-09-08 22:00'},
        {orderId: '2019020211192', receivingWarehouse: '仓库2', vendorName: 'XXXX有限责任公司', status: '2', createUser: 'XX', createTime: '2019-09-08 22:00', submitTime: '2019-09-08 22:00', approvalName: 'XX', processingTime: '2019-09-08 22:00'},
        {orderId: '2019020211193', receivingWarehouse: '仓库1', vendorName: 'XXXX有限责任公司', status: '3', createUser: 'XX', createTime: '2019-09-08 22:00', submitTime: '2019-09-08 22:00', approvalName: 'XX', processingTime: '2019-09-08 22:00'},
        {orderId: '2019020211194', receivingWarehouse: '仓库2', vendorName: 'XXXX有限责任公司', status: '4', createUser: 'XX', createTime: '2019-09-08 22:00', submitTime: '2019-09-08 22:00', approvalName: 'XX', processingTime: '2019-09-08 22:00'},
        {orderId: '2019020211195', receivingWarehouse: '仓库1', vendorName: 'XXXX有限责任公司', status: '5', createUser: 'XX', createTime: '2019-09-08 22:00', submitTime: '2019-09-08 22:00', approvalName: 'XX', processingTime: '2019-09-08 22:00'},
        {orderId: '2019020211196', receivingWarehouse: '仓库1', vendorName: 'XXXX有限责任公司', status: '', createUser: 'XX', createTime: '2019-09-08 22:00', submitTime: '2019-09-08 22:00', approvalName: 'XX', processingTime: '2019-09-08 22:00'}
      ],
      clickData: [
        {
          name: '编辑',
          type: 'edit',
          key: 'status',
          value: '1'
        }, {
          name: '编辑',
          type: 'edit',
          key: 'status',
          value: '4'
        }, {
          name: '删除',
          type: 'delete',
          key: 'status',
          value: '1'
        }, {
          name: '删除',
          type: 'delete',
          key: 'status',
          value: '4'
        }, {
          name: '撤回',
          type: 'cancel',
          key: 'status',
          value: '2'
        }
      ],
      clickDataWidth: '150',
      queryMap: [
        {
          headerKey: 'status',
          headerName: '状态',
          fun (row) {
            if (row.status == 1) {
              return '待提交'
            } else if (row.status == 2) {
              return '待审核'
            } else if (row.status == 3) {
              return '已审核'
            } else if (row.status == 4) {
              return '已驳回'
            } else if (row.status == 5) {
              return '已完成'
            } else {
              return ''
            }
          }
        }
      ],
      fixedOne: false,
      clickLast: true,
      mutipleSelectList: []
    }
  },
  created () {
    // this.getGoodsList()
  },
  methods: {
    async getGoodsList () {
      const temp = removeEmptyParams(this.searchInfo)
      let {data} = await this.$http.post(`/${this.$const.PREFIX.MAINDATA}/mareas/page`, temp)
      this.tableData = data.records
      this.pageData.total = data.total
      this.pageData.pageSize = data.size
      this.pageData.currentPage = data.current
    },
    onQuery () {
      // this.getGoodsList()
    },
    onReset () {
      this.param = Object.assign({}, DEFAULT_DATA)
    },
    async exportList () {
      const temp = removeEmptyParams(this.searchInfo)
      let {data} = await this.$http.post(`/${this.const.PREFIX.MAINDATA}/mareas/page`, temp)
      console.log(data)
    },
    onCreate () {
      if (this.mutipleSelectList.length === 0) {
        this.$message.warning('请选择提货商品! ')
      } else {
        // 判断一下供应商是否相同，不同则不能创建委外加工入库单
        let list = [...new Set(this.mutipleSelectList.map(item => item.vendorName))]
        // list = [...new Set(list)]
        if (list.length > 1) {
          this.$message.warning('供应商相同才能合并创建一张入库单!')
        } else {
          this.$router.push('')
        }
      }
    },
    delQueryModel () {},
    // 编辑
    editItem (id) {
      this.$router.push({
        name: 'editOsInbound',
        params: {
          id: id
        }
      })
    },
    selectRow (list, row) {
      this.mutipleSelectList = list
    },
    clickRight (data) {
      switch (data.type) {
        case 'edit':
          this.editItem(data.row.orderId)
          break
        case 'delete':
          this.deleteItem(data.row.orderId)
          break
        case 'cancel':
          this.cancelItem(data.row.orderId)
          break
      }
    },
    deleteItem (id) {
      this.$confirm('确认删除此入库单？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post(`/${this.$const.PREFIX.MAINDATA}/mareas/delete`, {id: id}).then((res) => {
          if (res.result) {
            this.$message.success('操作成功')
            this.getGoodsList()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {})
    },
    cancelItem (id) {
      this.$confirm('确认撤回此入库单？', '撤回确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post(`/${this.$const.PREFIX.MAINDATA}/mareas/cancel`, {id: id}).then(res => {
          if (res.result) {

          }
        }).catch(err => {
          this.$message.error(err)
        })
      })
    },
    sizeChangeHandle (val) {
      this.pageData.pageSize = val
      this.getGoodsList()
    },
    currentChangeHandle (val) {
      this.pageData.currentPage = val
      this.getGoodsList()
    }
  }
}
</script>
<style lang="scss">
  .osinbound-wrapper{
    &_search{
      background: white;
      padding: 20px 0 0 20px;
    }
  }
  .mtb15{
    margin: 15px 0;
  }
</style>

